<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="container">
			
		</div>
		<script src="lib/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".container",
				data:{
					msg:'生命周期'
				},
				methods: {
					
				},
				beforeCreate(){//表示实例完全被创建出来之前，会执行
					//在beforecreate生命周期函数执行的时候，data和methods中的数据还没有初始化
					console.log(this.msg)
				},
				created(){
					//created生命周期函数执行的时候，data和methods中的数据已经被初始化好了
					//如果要调用methods中的方法，或者data中的数据，最早要在created中
					console.log(this.msg)
				},
				beforeMount(){
					//模板已经在内存中编辑完成，但还没有把模板渲染到页面中
					//在beforemount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
				},
				mounted(){
					//内存中的模板已经真实挂在到了页面中，用户已经可以看到渲染好的页面
					//mounted是实例创建期间最后一个生命周期，当执行完mounted就表示，实例已经完全创建好了
				},
				//运行中的两个事件
				beforeUpdate(){
					//界面没有被更新，数据被更新了
					//当执行beforeUpdate的时候页面中显示的数据还是旧的，此时data的数据是最新的，页面还未和data数据同步
				},
				updated(){
					//updated事件执行的时候，页面和data数据已经保持同步了
				},
				beforeDestroy(){
					//beforeDestroy执行的时候，就已经从运行阶段进入到销毁阶段
					//实例上所有的data和所有的methods以及过滤器，指令都处于可用状态，还没有真正执行次销毁过程
				},
				destroyed(){
					//组件已经完全被销毁
				}
			})
		</script>
	</body>

</html>